<template>
  <transition name="fade">
    <div class="wrapper" v-if="loading">
      <div class="sk-cube-grid">
        <div class="sk-cube sk-cube1"></div>
        <div class="sk-cube sk-cube2"></div>
        <div class="sk-cube sk-cube3"></div>
        <div class="sk-cube sk-cube4"></div>
        <div class="sk-cube sk-cube5"></div>
        <div class="sk-cube sk-cube6"></div>
        <div class="sk-cube sk-cube7"></div>
        <div class="sk-cube sk-cube8"></div>
        <div class="sk-cube sk-cube9"></div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'XumPreLoader',
  props: {
    loading: {
      type: Boolean,
      request: true
    }
  },
  model: {
    prop: 'loading',
    event: 'change'
  },
  watch: {
    loading (state) {
      this.$emit('change', state)
    }
  }
}
</script>

<style lang="scss" scoped>

  /*动画*/
  .fade-leave-active {
    transition: opacity .5s;
  }

  /*动画*/
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }

  .wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #fafafa;
    z-index: 999999;

    .sk-cube-grid {
      width: 90px;
      height: 90px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -45px;
      margin-left: -45px;

      .sk-cube {
        width: 30px;
        height: 30px;
        background: #333333;
        position: absolute;
        animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
      }

      @keyframes sk-cubeGridScaleDelay{
        0%, 70%, 100% {
          -webkit-transform: scale3D(1, 1, 1);
          transform: scale3D(1, 1, 1);
        }
        35% {
          -webkit-transform: scale3D(0, 0, 1);
          transform: scale3D(0, 0, 1);
        }
      }

      .sk-cube1{
        top: 0;
        left: 0;
        animation-delay: 0.2s;
      }

      .sk-cube2{
        top: 0;
        left: 30px;
        animation-delay: 0.3s;
      }

      .sk-cube3{
        top: 0;
        left: 60px;
        animation-delay: 0.4s;
      }

      .sk-cube4{
        top: 30px;
        left: 0;
        animation-delay: 0.1s;
      }

      .sk-cube5{
        top: 30px;
        left: 30px;
        animation-delay: 0s;
      }

      .sk-cube6{
        top: 30px;
        left: 60px;
        animation-delay: 0.3s;
      }

      .sk-cube7{
        top: 60px;
        left: 0;
        animation-delay: 0s;
      }

      .sk-cube8{
        top: 60px;
        left: 30px;
        animation-delay: 0.1s;
      }

      .sk-cube9{
        top: 60px;
        left: 60px;
        animation-delay: 0.2s;
      }

    }

  }

</style>
